<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例实现移动端下拉图片放大</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .image-wrapper {
        /* tip: (图片高度 / 图片宽度) * 100 */
        padding-top:67%; 
        background:url("./images/22.png") no-repeat;
        background-size:cover;
        background-position:center;
    }
</style>
<body>
    <div class="image-wrapper"></div>
    <div class="list">
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡</p>
        <p class="item">哇卡哇卡我看看我哇卡哇卡ssss</p>
    </div>
    <script>
        window.onload = function() {
        const list = document.querySelector('.list');
        const imgHeader = document.querySelector('.image-wrapper');
        const item = document.querySelector('.item');
        const imgHeight = imgHeader.clientHeight;
        const maxDistance = 70;
        const bHeight = document.querySelector("body").clientHeight;
        let scale = 1;
        let startY,moveY,distanceY;
        list.addEventListener('touchstart',(e) => {
            if (e.targetTouches[0].pageY > e.targetTouches[0].clientY) {
               list.removeEventListener('touchmove',touchMove)
               list.removeEventListener('touchmove',touchEnd)
            }else {
                startY = e.targetTouches[0].clientY;
                list.style.transition = `transform .2s`
                imgHeader.style.transition = `transform .2s`
                list.addEventListener('touchmove',touchMove)
                list.addEventListener('touchend',touchEnd)
            }
        })
        list.addEventListener('touchmove',touchMove)


        list.addEventListener('touchend',touchEnd)


        function touchMove(e) {
            moveY = e.targetTouches[0].clientY;
            distanceY = moveY - startY;
            let percent = Math.abs(distanceY / imgHeight)
            scale = 1 + percent;
            if (distanceY > 0) {
                e.preventDefault();
                e.stopPropagation();
                list.style.transform = `translate3d(0,${distanceY}px,0)`;
                imgHeader.style.transform = `scale(${scale})`
            }
        }

        function touchEnd(e) {
            if (distanceY > 0) {
                list.style.transition = `transform .3s linear`
                list.style.transform = `translate3d(0,0,0)`;
                imgHeader.style.transition = `transform .3s linear`
                imgHeader.style.transform = `scale(1)`
            }
            
        }
    }
    </script>
</body>
</html>